<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        div {
            position: relative;
            width: 1070px;
            margin: 40px auto;
            overflow: hidden;
            background-color: #fff;
            box-shadow: 0px 0px 25px #ccc;
        }

        ul {

        }

        ul>li {
            margin-right: 15px;
            height: 125px;
            overflow: hidden;
            transition: width .2s linear;
        }
        img {
            width: 193px;
            height: 119px;
            border-radius: 6px;
            opacity: 0.5;
            vertical-align: top;
            box-sizing: border-box;
            padding: 15px;
        } */

        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        div{
            display: flex;
            flex-direction: column;
            width: 750px;
            margin: 0 auto;
        }
        ul{
            display: flex;
        }
        ul > li{
            width: 70px;
            height: 250px;
            overflow: hidden;
            transition: width .2s linear;
        }
        img{
            display: block;
            width: 400px;
            height: 250px;
        }
        ol{
            display: flex;
        }
        ol > li{
            width: 10px;
            height: 10px;
            margin: 10px;
            background-color: aquamarine;
        }
        ol > li:first-child{
            background-color: red;
        }

    </style>
</head>
<body>
    <div>
        <ul>
        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <script>
       var ul = document.querySelector("ul");
        var str = "https://www.jq22.com/demo/jqueryhdlbt202103282156/img/t";
        var str1 = "";
        for(var i = 1;i <= 7;i++){
            var url = str + i + ".png"
            str1 += `<li>
                    <img src="${url}" alt="tu">
                </li>`
        }
        ul.innerHTML = str1;

        var lis = document.querySelectorAll("ul > li");
        var ollis = document.querySelectorAll("ol > li");
        lis[0].style.width = "400px";
        for(var i = 0;i < lis.length;i++){

            lis[i].aaa = i; 
            lis[i].onmouseenter = function(){

                for(var k = 0;k < lis.length;k++){
                    lis[k].style.width = "70px";
                    ollis[k].style.backgroundColor = "aquamarine";
                }

                console.log(this.aaa); 

                ollis[this.aaa].style.backgroundColor = "red";
                this.style.width = "400px";
                
            }
        }     
    </script>
</body>

</html>